<template>
  <view>
    <view class="nav-head">请选择您的身份</view>
      <navigator v-for="(item, index) in list" :url="'/pages/login/register?type=' + item.type" class="list" :key="index">
        <image :src="item.img" mode="widthFix"></image>
        <view class="plank">
          <view class="title">{{ item.title }}</view>
          <view class="cont">{{ item.cont }}</view>
        </view>
        <uni-icons type="arrowright" size="18"></uni-icons>
      </navigator>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          type: '1',
          img: '/static/img/register/gongyingshang.png',
          title: '供应商',
          cont: '供应商介绍内容内容内容内容内容内容内容内容内容内容内容内容内容内容'
        },
        {
          type: '2',
          img: '/static/img/register/dinghuoshang.png',
          title: '订货商',
          cont: '订货商介绍内容内容内容内容内容内容内容内容内容内容内容内容内容内容'
        },
        {
          type: '3',
          img: '/static/img/register/fenxiaoshang.png',
          title: '分销商',
          cont: '分销商介绍内容内容内容内容内容内容内容内容内容内容内容内容内容内容'
        }
      ]
    };
  },
  onLoad() {},
  };
</script>

<style lang="scss">
.nav-head {
  margin: 40rpx 30rpx;
  margin-bottom: 100rpx;
  font-size: 40rpx;
  font-weight: bold;
}
.list {
  margin: 40rpx 30rpx;
  padding: 10rpx 20rpx;
  background-color: #f7f8f9;
  box-shadow: 0 0 20rpx #dedcdf;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  image {
    width: 150rpx;
    height: 150rpx;
    border-radius: 50%;
    flex-shrink: 0;
    margin: 10rpx;
  }
  .plank {
    height: 150rpx;
    .title {
      font-size: 36rpx;
      margin-bottom: 10rpx;
    }
    .cont {
      color: #666;
      font-size: 30rpx;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
  }
}
</style>
